<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap {
            width: 100%;
            display: flex;
            margin: 0.2rem 0 0 0;
            position: relative;
        }

        /*左侧的导航样式*/
        .nav_left {
            width: 21.1875rem;
            overflow: scroll;
        }

        .nav_left::-webkit-scrollbar {
            display: none;
        }

        .nav_content {
            white-space: nowrap;
            padding: 0 0.7rem;
        }

        .nav_content span {
            display: inline-block;
            padding: 0.4rem 0.6rem;
            font-size: 0.875rem;
        }

        .nav_content .active {
            border-bottom: 2px solid #7f4395;
            color: #7f4395;
        }

        .nav_left,
        .down {
            float: left;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="wrap">
            <div class="nav_left" id="navLeft">
                <div class="nav_content">
                    <span @click="activeIndex=index" :class="{active:activeIndex==index}" v-for="(item,index) in arr"
                        :key="index">{{item.first_name}}</span>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.14/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                activeIndex: 0,
                arr: [
                    {
                        first_id: "0",
                        first_name: "热门"
                    },
                    {
                        first_id: "621",
                        first_name: "\u5496\u5561",
                    },
                    {
                        first_id: "627",
                        first_name: "\u996e\u98df",
                    },
                    {
                        first_id: "279",
                        first_name: "\u7537\u88c5",
                    },
                    {
                        first_id: "294",
                        first_name: "\u5973\u88c5",
                    },
                    {
                        first_id: "122",
                        first_name: "\u773c\u955c",
                    },
                    {
                        first_id: "339",
                        first_name: "\u5185\u8863\u914d\u9970",
                    },
                    {
                        first_id: "391",
                        first_name: "\u6bcd\u5a74",
                    },
                    {
                        first_id: "35",
                        first_name: "\u978b\u9774",
                    },
                    {
                        first_id: "39",
                        first_name: "\u8fd0\u52a8",
                    },
                    {
                        first_id: "153",
                        first_name: "\u7bb1\u5305",
                    },
                    {
                        first_id: "119",
                        first_name: "\u7f8e\u5986\u4e2a\u62a4",
                    },
                    {
                        first_id: "355",
                        first_name: "\u5bb6\u7eba",
                    },
                    {
                        first_id: "51",
                        first_name: "\u9910\u53a8",
                    },
                    {
                        first_id: "334",
                        first_name: "\u7535\u5668",
                    },
                    {
                        first_id: "369",
                        first_name: "\u5bb6\u88c5",
                    },
                    {
                        first_id: "10",
                        first_name: "\u5bb6\u5177",
                    },
                    {
                        first_id: "223",
                        first_name: "\u6570\u7801",
                    },
                    {
                        first_id: "429",
                        first_name: "\u6c7d\u914d",
                    },
                    {
                        first_id: "546",
                        first_name: "\u5065\u5eb7\u4fdd\u5065",
                    },
                    {
                        first_id: "433",
                        first_name: "\u5b9a\u5236",
                    },
                ]
            }
        })
    </script>
</body>

</html>